{extend name="public/common"}

{block name="style"}
<title>个人中心</title>
<script src="/index/js/jquery-3.2.1.min.js"></script>
<!--<script src="/index/css/reset.css"></script>-->
<style>
    body{
        background-color: #F0F0F0;
    }
    .mint-tab-item-label { font-size: 1.4rem;  }
    .mint-navbar .mint-tab-item.is-selected {color: #69B9F9;opacity: .9;margin-bottom: 0}
    /*.mint-tab-item:active {*/
    /*background: red;*/
    /*}*/
    .tab-item-sort>.tab-item-time {padding: 0 4vw;height:7.2vw;line-height: 7.2vw;color: #929292;font-size: 1.2rem;}
    .tab-sort-num {background: #fff;width:96vw;padding: 4.53vw 0 4.53vw 4vw;margin-bottom: 2.67vw;}
    .tab-sort-Img {width:21.33vw;height:21.33vw;float:left;}
    .tab-sort-detail {margin-left: 24.53vw;height:21.4vw;position: relative;padding-right: 4vw;font-size: 1.2rem;}
    .tab-sort-title {
        color: #333;
        font-size: 1.6rem;
        display: -webkit-box;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
        min-height: 11.733vw;
    }
    .tab-sort-time {font-size: 1.2rem;color: #999;}
    .tab-sort-day {margin-top: 1.5vw;}
    .tab-sort-day span {padding: 1px;}
    .tab-sort-day span:first-child {
        border-top: 1px solid #69B9F9;
        border-left: 1px solid #69B9F9;
        border-bottom: 1px solid #69B9F9;
        background: #69B9F9;
        color: #fff;
        border-top-left-radius: 1vw;
        border-bottom-left-radius: 1vw;
    }
    .tab-sort-day span:last-child {
        border-top: 1px solid #69B9F9;
        border-right: 1px solid #69B9F9;
        border-bottom: 1px solid #69B9F9;
        color: #69B9F9;
        border-top-right-radius: 1vw;
        border-bottom-right-radius: 1vw;
    }
    .tab-sort-money {
        position: absolute;
        bottom:-.7vw;
        right:4vw;
        font-size: 1.6rem;
        color: #52CC92;
    }
    .tab-sort-bottom {
        margin-left: 24.53vw;
        border-top: 1px solid #E8E8E8;
        margin-top: 3.14vw;
        padding-top: 2.14vw;
    }
    .tab-sort-bottom .active {font-size: 1.1rem;color: #333;}
    .tab-sort-bottom .active img {
        width:4.27vw;
        height:4.27vw;
        background: #FCC44B;
        border-radius: 2px;
        color: #fff;
    }
    .tab-sort-bottom .cancel {font-size: 1.1rem;color: #999;}
    .tab-sort-bottom .cancel img {
        width:4.27vw;
        height:4.27vw;
        background: #E5E5E5;
        border-radius: 2px;
        color: #fff;
    }
    .mint-tab-container {margin-top: 2.67vw;overflow: scroll;}
    .mint-spinner-snake {position: relative;margin-left: 50%;left:-14px;}
    .tip{
        height: 10.8vw;
        text-align: center;
        line-height: 10.8vw;
        color:#c1c1c1;
        font-size: 1.2rem;
    }
    .loading{
        width: 100%;
        height: 10.8vw;
        text-align: center;
    }
    .typing_loader{
        width: 6px;
        height: 6px;
        border-radius: 50%;
        -webkit-animation: typing 1s linear infinite alternate;
        -moz-animation: Typing 1s linear infinite alternate;
        animation: typing 1s linear infinite alternate;
        position: relative;
        top: 4.54vw;
        left: 46vw;
    }
    .mint-spinner-fading-circle {left:50%;margin-left: -14px;}
</style>
{/block}

{block name="body"}
<!-- -1 删除   0.禁用   1 预报名中 2启动.-->
<div id="app">
    <mt-navbar v-model="selected">
        <mt-tab-item id="1">全部</mt-tab-item>
        <mt-tab-item id="2">已报名</mt-tab-item>
        <mt-tab-item id="3">已取消</mt-tab-item>
    </mt-navbar>
    <!--<div>-->
    <!--<mt-cell class="page-part" title="当前选中">{{ selected }}</mt-cell>-->
    <!--</div>-->
    <!-- tab-container -->
    <mt-tab-container v-model="selected">
        <mt-tab-container-item id="1">
                <div class="tab-sort-num" v-for="item in getScoreLog" @click="jumpToDel(item.id)" :data-id="item.id">
                    <img :src="item.front_cover" class="tab-sort-Img">
                    <div class="tab-sort-detail">
                        <div class="tab-sort-title">{{item.name}}</div>
                        <div class="tab-sort-time">赛事时间：{{item.start_time}} - {{item.end_time}}</div>
                        <div class="tab-sort-day"><span>热门活动 </span><span>{{item.reminder}}</span></div>
                        <div class="tab-sort-money">¥{{(item.money/100).toFixed(2)}}</div>
                    </div>
                    <div class="tab-sort-bottom">
                        <div class="active" v-if="state(item.status) == 'true'"><img src="/index/images/icon_bao.png" alt=""> 已报名参加该活动</div>
                        <div class="cancel" v-if="state(item.status) == 'false'"><img src="/index/images/icon_xiao.png" alt=""> 已取消参加该活动</div>
                    </div>
                </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="2">
            <div class="tab-sort-num" v-for="item in getScoreLog2" :data-id="item.id" @click="jumpToDel(item.id)">
                <img :src="item.front_cover" class="tab-sort-Img">
                <div class="tab-sort-detail">
                    <div class="tab-sort-title">{{item.name}}</div>
                    <div class="tab-sort-time">赛事时间：{{item.start_time}} - {{item.end_time}}</div>
                    <div class="tab-sort-day"><span>热门活动 </span><span>{{item.reminder}}</span></div>
                    <div class="tab-sort-money">¥{{(item.money/100).toFixed(2)}}</div>
                </div>
                <div class="tab-sort-bottom">
                    <div class="active" v-if="state(item.status) == 'true'"><img src="/index/images/icon_bao.png" alt=""> 已报名参加该活动</div>
                    <div class="cancel" v-if="state(item.status) == 'false'"><img src="/index/images/icon_xiao.png" alt=""> 已取消参加该活动</div>
                </div>
            </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
            <div class="tab-sort-num" v-for="item in getScoreLog3" :data-id="item.id" @click="jumpToDel(item.id)">
                <img :src="item.front_cover" class="tab-sort-Img">
                <div class="tab-sort-detail">
                    <div class="tab-sort-title">{{item.name}}</div>
                    <div class="tab-sort-time">赛事时间：{{item.start_time}} - {{item.end_time}}</div>
                    <div class="tab-sort-day"><span>热门活动 </span><span>{{item.reminder}}</span></div>
                    <div class="tab-sort-money">¥{{(item.money/100).toFixed(2)}}</div>
                </div>
                <div class="tab-sort-bottom">
                    <div class="active" v-if="state(item.status) == 'true'"><img src="/index/images/icon_bao.png" alt=""> 已报名参加该活动</div>
                    <div class="cancel" v-if="state(item.status) == 'false'"><img src="/index/images/icon_xiao.png" alt=""> 已取消参加该活动</div>
                </div>
            </div>
        </mt-tab-container-item>
    </mt-tab-container>
    <div class="bg"></div>
    <div class="tip"></div>
    <div class="loading hidden">
        <mt-spinner :type="3" style="font-size: 1.2rem;"></mt-spinner>加载中...
    </div>
</div>
{/block}

{block name="script"}
<script>
//    location.reload()
    var commonUrl = "{:Url('users/getMoreList')}"
    var app = new Vue({
        el: '#app',
        data: {
            selected:"1",
            baseInfo:{$list},
//            pictureUrl:'',
            subData:{
                id:'',
                typeid:''
            },
            loading:false,
            loading2:false,
            loading3:false,
            canLoad:true,
            canLoad2:true,
            canLoad3:true,
            getScoreLog: [],
            getScoreLog2: [],
            getScoreLog3: [],
        },
        created(){
            baseInfo=this.baseInfo,
                now=Date.parse(new Date())/1000;
            for(var i=0 ;i<baseInfo[0].length;i++){
                this.getScoreLog.push(baseInfo[0][i])
            }
            for(var j=0 ;j<baseInfo[1].length;j++){
                this.getScoreLog2.push(baseInfo[1][j])
            }
            console.log(this.getScoreLog2)
            for(var k=0 ;k<baseInfo[2].length;k++){
                this.getScoreLog3.push(baseInfo[2][k])
            }
        },
        methods: {
            state(status){
                if(status == 1){
                    return 'true'
                }else if(status ==2){
                    return 'false'
                }else if(status ==3){
                    return 'false'
                }
            },
            jumpToDel(id){
                window.location.href = '/index/users/detail/id/'+id
//                console.log(id)
            }
        }
    })
</script>
<script>
    var scrollNow = true;
     type = 1;
    var tip = $(".tip");
    _length = $('.mint-tab-container-item').eq(type-1).find('.tab-sort-num').length;
    $('.mint-navbar a').on('click',function(){
        type = $(this).index()+1
        _length = $('.mint-tab-container-item').eq(type-1).find('.tab-sort-num').length;
        if(_length >= 6){
            tip.text('上拉加载更多');
            loadScroll();
        }else{
            tip.hide();
        }
    })
    if(_length >= 6){
        tip.text('上拉加载更多');
        loadScroll();
    }else{
        tip.hide();
    }
//    loadScroll()
    function loadScroll(){
        $(window ).off("scroll" ).on("scroll",function(){
            var ntc = $('.lists');
            var dh = $(document).height();
            var end = $(window).height() + $(window ).scrollTop();
            var len = $('.mint-tab-container-item').eq(type-1).find('.tab-sort-num').length;
            var tip = $(".tip");
            var loading = $('.loading');
            if(dh == end && scrollNow){
                scrollNow = false;
                console.log({
                    len:len,
                    type:type
                })
                $.ajax({
                    type:"post",
                    url: "{:Url('users/getMoreList')}",
                    data:{
                        len:len,
                        type:type
                    },
                    beforeSend: function(XMLHttpRequest){
                        tip.hide();
                        loading.toggleClass('hidden');
                    },
                    success:function(data){
                        loading.toggleClass('hidden');
                        tip.show();
                        var data = JSON.parse(data)
                        console.log(data)
                        addLists(data);
                        if(data == ''){
                            tip.text('没有更多了');
//                            $(window ).off("scroll");
                        }else{
                            tip.text('上拉加载更多');
                        }
                        scrollNow = true;
                    }
                })
            }
        })
    }
    function addLists(data){
        var html = '';
        var lists = data;
        var len = lists.length;
        for(var i = 0; i< len;i++){
            var list = lists[i];
            var str = '';
            if(list.status == 1){
                str = '<div class="active"><img src="/index/images/icon_bao.png" alt=""> 已报名参加该活动</div>'
            }else {
                str = '<div class="cancel"><img src="/index/images/icon_xiao.png" alt=""> 已取消参加该活动</div>'
            }
            //var pid = $('.part div' ).eq(list.pid ).text();
            html +='<div class="tab-sort-num" data-id="'+list.id+'">'
                +'<img src="'+list.front_cover+'" class="tab-sort-Img">'
                +'<div class="tab-sort-detail"><div class="tab-sort-title">'+list.name+'</div><div class="tab-sort-time">赛事时间：'+list.start_time+' - '+list.end_time+'</div><div class="tab-sort-day"><span>热门活动 </span><span>'+list.reminder+'</span></div><div class="tab-sort-money">¥'+(list.money/100).toFixed(2)+'</div></div>'
                +'<div class="tab-sort-bottom">'+str+'</div>'
                +'</div>'
        }
        $('.mint-tab-container-item').eq(type-1).append(html)
    }
    $(document).on('click','.mint-tab-container-item .tab-sort-num',function(){
        var id = $(this).data('id');
        window.location.href = '/index/users/detail/id/'+id
    })


</script>
<script>
    var objNow = 1;//退出事件
//    isOut();
//    window.sessionStorage.removeItem('IdNumber');
    var num = window.sessionStorage.getItem('IdNumber');
    console.log(num == null)
    if(num !== null){
        isOut()
    }
    window.confirm = function (name) {
//隐藏提示框的url,返回按钮结果
        var iframe = document.createElement("IFRAME");
        iframe.style.display = "none";
        iframe.setAttribute("src", 'data:text/plain,');
        document.documentElement.appendChild(iframe);
        var result = window.frames[0].window.confirm(name);
        iframe.parentNode.removeChild(iframe);
        return result;
    };

    //退出提示
    function isOut() {
        pushHistory();
        setTimeout(function () {
//            swal({
//                title: ' ',
//                text: '提交成功',
//                type: 'success',
//                confirmButtonText:'确定'
//            },function(){
//                console.log(1)
////                javascript:history.go(-1);
//            });
            window.addEventListener("popstate", function (e) {
                window.location.href = '/index/activity/index';
                window.sessionStorage.removeItem('IdNumber');
//                if (objNow) {
//
//                }
//                else {
//                    window.history.go(-1);
//                }
            }, false);
        }, 200)
    }

    //防止恶意刷新
    function pushHistory() {
        var sta = {
            title: "title"
        };
        if (window.history.state === null) {
            window.history.pushState(sta, "title");
        }
    }
</script>
{/block}